<style lang="less"></style>
<template>
  <div>
    <Modal
      :title="modalTitle"
      v-model="modalVisible"
      :mask-closable="false"
      :width="500"
      :styles="{ top: '100px' }"
      @on-cancel="hideModal"
    >
      <Form ref="cableForm" :model="cableForm" :label-width="140" :rules="rulesForm">
        <Form-item label="缆段名称" prop="cableName">
          <Input
            type="text"
            v-model="cableForm.cableName"
            clearable
            placeholder="请输入缆段名称"
            style="width: 300px;"
          />
        </Form-item>
        <Form-item label="缆段编码" prop="cableCode">
          <Input
            type="text"
            v-model="cableForm.cableCode"
            clearable
            placeholder="请输入缆段编码"
            style="width: 300px;"
          />
        </Form-item>
        <Form-item label="缆段长度（km）" prop="cableLength">
          <InputNumber
            v-model="cableForm.cableLength"
            clearable
            placeholder="请输入缆段长度"
            style="width: 300px;"
          />
        </Form-item>
        <Form-item label="缆段芯数" prop="corenum">
          <InputNumber
            v-model="cableForm.corenum"
            clearable
            placeholder="请输入缆段芯数"
            style="width: 300px;"
          />
        </Form-item>
      </Form>
      <div slot="footer">
        <Button type="text" @click="hideModal">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="submit">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { getCableInfo, addCable, editCable } from "@/api/fibre";

import util from "@/libs/util.js";

export default {
  name: "cable-form",
  components: {},
  props: {
    cableModalVisible: {
      type: Boolean,
      default: function() {
        return false;
      }
    },
    modalType: {
      type: Number,
      default: function() {
        return 0;
      }
    },
    fibreId: {
      type: Number,
      default: function() {
        return 0;
      }
    },
    cableId: {
      type: Number,
      default: function() {
        return 0;
      }
    }
  },

  data() {
    return {
      modalVisible: false,
      cableForm: {
        cableId: "",
        cableName: "",
        cableCode: "",
        corenum: "",
        cableLength: ""
      },
      rulesForm: {
        cableName: [
          {
            required: true,
            message: "缆段名称不能为空",
            trigger: "blur"
          }
        ],
        cableCode: [
          {
            required: true,
            message: "缆段编码不能为空",
            trigger: "blur"
          }
        ],
        corenum: [
          {
            required: true,
            message: "缆段芯数不能为空",
            trigger: "blur",
            type: "number"
          }
        ],
        cableLength: [
          {
            required: true,
            message: "缆段长度不能为空",
            trigger: "blur",
            type: "number"
          }
        ]
      },
      submitLoading: false
    };
  },
  computed: {
    modalTitle() {
      return this.modalType == 0 ? "添加缆段" : "修改缆段";
    }
  },
  watch: {
    cableModalVisible(newVal, oldVal) {
      if (newVal) {
        this.modalVisible = newVal;

        if (this.modalType == 1) {
          this.edit();
        } else {
          this.add();
        }
      }
    }
  },
  methods: {
    init() {},
    add() {
      this.$refs.cableForm.resetFields();
      this.cableForm.fibreId = this.fibreId;
    },
    edit() {
      this.$refs.cableForm.resetFields();
      getCableInfo({ cableId: this.cableId }).then(
        res => {
          if (res.code == 0) {
            this.cableForm = res.data;
          }
        },
        error => {
          console.log("submit error", JSON.stringify(error));
        }
      );
    },

    /**
     * 提交新增Cable
     * @param newForm
     */
    submit() {
      if (this.modalType == 0) {
        this.$refs.cableForm.validate(valid => {
          if (valid) {
            this.submitLoading = true;
            let obj = util.deepClone(this.cableForm);
            console.log("submit", obj);
            addCable(this.cableForm).then(
              res => {
                this.submitLoading = false;
                if (res.code == 0) {
                  this.$Message.success("新增成功");
                  this.hideModal();
                  this.$emit("updateDeviceTree");
                }
              },
              error => {
                console.log("submit error", JSON.stringify(error));
              }
            );
          }
        });
      } else {
        this.$refs.cableForm.validate(valid => {
          if (valid) {
            this.submitLoading = true;
            let obj = util.deepClone(this.cableForm);
            editCable(obj).then(
              res => {
                this.submitLoading = false;
                if (res.code == 0) {
                  this.$Message.success("编辑成功");
                  this.$emit("updateDeviceTree");
                  this.hideModal();
                }
              },
              error => {
                console.log("submit error", JSON.stringify(error));
              }
            );
          }
        });
      }
    },
    hideModal() {
      this.modalVisible = false;
      this.$emit("hideCableModal");
    }
  },
  mounted() {
    this.init();
  }
};
</script>
